<template>
  <div class="cast">
    <div class="device-list">
      <device-list
        @sendDevice="sendDevice"
        @sendDeviceList="sendDeviceList"
        @receiveDevice="receiveDevice"
        @receiveDeviceList="receiveDeviceList"
      ></device-list>
    </div>
    <div class="device-cast">
      <div class="device-cast-header">设备队列
        <el-button
          size="small"
          class="save-btn"
          type="success"
          icon="el-icon-folder-checked"
          v-if="userGuardList.includes(guard.RouterManage)"
          @click="sendList"
        >
          保存
        </el-button>
      </div>
      <div class="device-cast-container">
        <div class="device-cast-container-sender-header">发送端</div>
        <div class="device-cast-sender-list">
          <send-device-list :sendDeviceTableData="sendDeviceTableData"></send-device-list>
        </div>
        <div class="device-cast-container-receiver-header">接收组</div>
        <div class="device-cast-receiver-list">
          <receive-device-list :receiveDeviceTableData="receiveDeviceTableData"></receive-device-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui';
import { mapState } from 'vuex';
import { updateRouterDeviceListApi } from '../../../api/router';
import DeviceList from './deviceList/deviceList.vue';
import SendDeviceList from './sendDeviceList/sendDevie.vue';
import ReceiveDeviceList from './receiveDeviceList/receiveDevice.vue';
import { parseError } from '../../../utils';
export default {
  components: {
    DeviceList,
    SendDeviceList,
    ReceiveDeviceList
  },
  data() {
    return {
      routerUuid: '',
      sendDeviceTableData: [],
      receiveDeviceTableData: []
    };
  },
  computed: {
    ...mapState(['deviceCastObject'])
  },
  mounted() {
    this.routerUuid = this.deviceCastObject.deviceCastObject.uuid;
    this.sendDeviceTableData = this.deviceCastObject.deviceCastObject.senderDeviceList.map(item => {
      return {
        uuid: item.uuid,
        serialNumber: item.serial_number,
        name: item.name
      };
    });
    this.receiveDeviceTableData = this.deviceCastObject.deviceCastObject.receiverDeviceList.map(item => {
      return {
        uuid: item.uuid,
        serialNumber: item.serial_number,
        name: item.name
      };
    });
  },
  methods: {
    // 通过uuid去重
    arrOfUuidSet(value) {
      const uuidList = value.map(device => device.uuid);
      const uuidSetList = [...new Set(uuidList)];
      return uuidSetList.map(uuid => value[uuidList.indexOf(uuid)]);
    },
    judgeOnlyItem(sendList, receiveList) {
      let canAdd = true;
      const sendUuidList = sendList.map(device => {
        return device.uuid;
      });
      const receiveUuidList = receiveList.map(device => {
        return device.uuid;
      });
      sendUuidList.forEach(uuid => {
        if (receiveUuidList.find(val => val == uuid) !== undefined) canAdd = false;
      });
      return canAdd;
    },
    sendDevice(value) {
      const sendDeviceList = [...this.sendDeviceTableData];
      sendDeviceList.push(value);
      if (!this.judgeOnlyItem(sendDeviceList, this.receiveDeviceTableData)) return Message.warning('不可添加接收组已存在设备');
      this.sendDeviceTableData = this.arrOfUuidSet(sendDeviceList);
    },
    sendDeviceList(value) {
      const sendDeviceList = [...this.sendDeviceTableData];
      const newSendDeviceList = sendDeviceList.concat(value);
      if (!this.judgeOnlyItem(newSendDeviceList, this.receiveDeviceTableData)) return Message.warning('不可添加接收组已存在设备');
      this.sendDeviceTableData = this.arrOfUuidSet(newSendDeviceList);
    },
    receiveDevice(value) {
      const receiveDeviceList = [...this.receiveDeviceTableData];
      receiveDeviceList.push(value);
      if (!this.judgeOnlyItem(this.sendDeviceTableData, receiveDeviceList)) return Message.warning('不可添加发送端已存在设备');
      this.receiveDeviceTableData = this.arrOfUuidSet(receiveDeviceList);
    },
    receiveDeviceList(value) {
      const receiveDeviceList = [...this.receiveDeviceTableData];
      const newreceiveDeviceList = receiveDeviceList.concat(value);
      if (!this.judgeOnlyItem(this.sendDeviceTableData, newreceiveDeviceList)) return Message.warning('不可添加发送端已存在设备');
      this.receiveDeviceTableData = this.arrOfUuidSet(newreceiveDeviceList);
    },
    sendList() {
      const sendUuidList = this.sendDeviceTableData.map(sendDevice => {
        return sendDevice.uuid;
      });
      const receiveUuidList = this.receiveDeviceTableData.map(receiveDevice => {
        return receiveDevice.uuid;
      });
      updateRouterDeviceListApi(this.routerUuid, sendUuidList, receiveUuidList)
        .then(res => {
          Message.success('保存成功');
          this.$router.go(-1);
        })
        .catch(error => Message.error(parseError(error)));
    }
  }
};
</script>

<style lang="scss" scoped>
.el-button--primary {
  background-color: #2c83b1 !important;
  border-color: #2c83b1 !important;
  margin-bottom: 10px;
}
.cast {
  display: flex;
  // height: calc(100vh - 120px);
  .device-list {
    width: calc(60vw - 110px);
  }
  .device-cast {
    width: calc(40vw - 110px);
    &-header {
      padding: 10px 10px 10px 0;
      font-size: 24px;
      font-weight: 800;
      display: flex;
      justify-content: space-between;
      .save-btn {
        background-color: #2c83b1 !important;
        border: 0;
      }
    }
    &-container {
      // height: calc(100vh - 175px);
      // height: calc(100vh - 260px);
      // display: flex;
      flex-direction: column;
      &-sender-header {
        background-color: #fff;
        padding: 10px 10px 0 10px;
        margin-right: 9px;
        font-weight: 800;
      }
      &-receiver-header {
        background-color: #fff;
        padding: 10px 10px 0 10px;
        margin-right: 9px;
        font-weight: 800;
      }
    }
    &-sender-list {
      // flex: 1;
      // white-space: nowrap;
      // overflow-x: hidden;
      // overflow-y: scroll;
      margin: 0 10px 10px 0;
      padding: 0 10px;
      background-color: #fff;
    }
    &-receiver-list {
      margin: 0 10px 10px 0;
      padding: 0 10px;
      background-color: #fff;
    }
  }
}
</style>
